<template>
    <Row>
        <Card>
            <Row>
                <Form class="form-row" ref="search" :model="params" :label-width="90" inline>
                    <FormItem label="停车场" prop="parkingName">
                        <div class="filters-input">
                            <el-select v-model="params.parkingId" placeholder="请选择停车场" :clearable="true"
                                       class="normal-input">
                                <el-option v-for="item in parkingData" :value="item.id" :key="item.id" :label="item.parkingName">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="出入口" prop="">
                        <div class="filters-input">
                            <Input type="text" v-model="params.road" placeholder="请输入出入口名称" class="normal-input"/>
                        </div>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="handleSearch">搜索</Button>
                    </FormItem>
                </Form>
            </Row>
            <Row class="form-row">
                <Button type="primary" icon="md-add"
                        @click="modalEdit = true;modalType = 'add'; roadInfo = {roadType: '入口',isEnable: '启用'}">新增
                </Button>
            </Row>

            <el-table :data="data.list" border stripe style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="parkingName" label="停车场名称"></el-table-column>
                <el-table-column prop="roadName" label="出入口名称"></el-table-column>
                <el-table-column prop="roadType" label="出入口类型"></el-table-column>
                <el-table-column prop="mainVideoIp" label="相机IP"></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleModify(scope.row)">修改</el-button>
                        <el-button size="mini" type="warning" @click="handleDelete( scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <Page style="margin: 10px 0;" :total="data.total" :current="data.pageNum" :page-size="data.pageSize"
                  show-total show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>
        <Modal v-model="modalEdit" :title="modalType == 'add' ? '新增': '修改'" width="650">
            <Form ref="saveRoadInfo" :model="roadInfo" :rules="saveRoadInfoValidateRules" :label-width="120">
                <FormItem label="停车场" prop="parkingId">
                    <Select v-model="roadInfo.parkingId" :clearable="true">
                        <Option v-for="item in parkingData" :value="item.id" :key="item.id">{{ item.parkingName }}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem label="出入口名称" prop="roadName">
                    <Input v-model="roadInfo.roadName" placeholder="出入口名称"></Input>
                </FormItem>
                <FormItem label="相机ID/序列号" prop="cameraId">
                    <Input v-model="roadInfo.cameraId" placeholder="相机ID/序列号"></Input>
                </FormItem>
                <FormItem label="相机IP" prop="mainVideoIp">
                    <Input v-model="roadInfo.mainVideoIp" placeholder="出入口名称"></Input>
                </FormItem>
                <FormItem label="监控编号" prop="bindDeskNum">
                    <InputNumber v-model="roadInfo.bindDeskNum" placeholder="出入口名称"
                                 class="max-width-input"></InputNumber>
                </FormItem>
                <FormItem label="重复读取时间" prop="repeatReadSecond">
                    <InputNumber v-model="roadInfo.repeatReadSecond" placeholder="出入口名称"
                                 class="max-width-input"></InputNumber>
                </FormItem>
                <FormItem label="出入口类型" prop="roadType">
                    <RadioGroup v-model="roadInfo.roadType">
                        <Radio label="入口">入口</Radio>
                        <Radio label="出口">出口</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="是否人工确认" prop="peopleSubmit">
                    <i-switch v-model="roadInfo.peopleSubmit">
                        <span slot="open">是</span>
                        <span slot="close">否</span>
                    </i-switch>
                </FormItem>
                <FormItem label="是否播报车牌" prop="talkCarNum">
                    <i-switch v-model="roadInfo.talkCarNum">
                        <span slot="open">是</span>
                        <span slot="close">否</span>
                    </i-switch>
                </FormItem>
                <FormItem label="是否播报车辆模式" prop="talkCarModel">
                    <i-switch v-model="roadInfo.talkCarModel">
                        <span slot="open">是</span>
                        <span slot="close">否</span>
                    </i-switch>
                </FormItem>

                <!--<FormItem label="是否启用" prop="restSpace">-->
                <!--<i-switch  v-model="roadInfo.isEnable">-->
                <!--<span slot="open">开启</span>-->
                <!--<span slot="close">关闭</span>-->
                <!--</i-switch>-->
                <!--</FormItem>-->
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="onCancel()">关闭</Button>
                <Button type="primary" size="large" @click="handleSubmit" :loading="saveRoadInfoLoading">确定</Button>
            </div>
        </Modal>
    </Row>
</template>

<script>
    export default {
        name: "list",
        data() {
            return {
                params: {},
                modalEdit: false,
                modalType: 'add',
                saveRoadInfoLoading: false,
                roadInfo: {
                    roadType: '入口',
                    // isEnable: true
                },
                data: {
                    pageNum: 1,
                    pageSize: 10,
                    total: 0
                },
                saveRoadInfoValidateRules: {
                    roadName: [
                        {required: true, message: "请输入出入口名称", trigger: "blur"}
                    ],
                    mainVideoIp: [
                        {required: true, message: "请输入相机IP", trigger: "blur"}
                    ],
                },
                parkingData: []
            }

        },
        created: function () {
            this.init()
        },
        methods: {
            handleSearch: function () {
                this.loadData()
            },
            handleModify: function (row) {
                console.log(row)
                this.modalEdit = true
                this.modalType = 'edit'
                this.roadInfo = row
            },
            handleDelete: function (row) {
                this.$Modal.confirm({
                    title: '提示',
                    content: '确定删除此出入口信息？',
                    onOk: () => {
                        // this.$Message.info('Clicked ok');
                        this.roadInfo = row
                        this.roadInfo.isDelete = true
                        this.saveRoadInfo()
                    },
                    onCancel: () => {

                    }
                })
            },
            init: function () {
                this.getRequest('/api/parking/all').then(resp => {
                    console.log(resp)
                    if (resp.code == 20000) {
                        this.parkingData = resp.data
                    }
                })
                this.loadData()
            },
            loadData: function () {
                let url = "/api/parking/roads?page_num=" + this.data.pageNum + "&page_size=" + this.data.pageSize
                if (this.params.parkingId) {
                    url += "&parking_id=" + this.params.parkingId
                }
                if (this.params.road) {
                    url = url + '&search_text=' + this.params.road
                }
                this.getRequest(url).then(resp => {
                    console.log(resp)
                    if (resp.code == 20000) {
                        this.data = resp.data;
                        return
                    }
                    this.$Message.error(resp.message);
                })
            },
            saveRoadInfo: function () {
                this.saveRoadInfoLoading = true
                const url = "/api/parking/road/save"
                this.postRequest(url, this.roadInfo).then(resp => {
                    console.log(resp)
                    this.saveRoadInfoLoading = false
                    if (resp.code == 20000) {
                        this.modalEdit = false
                        this.loadData()
                        this.$Message.success("成功")
                        return
                    }
                    this.$Message.error(resp.message);
                })
            },
            handlePage(value) {
                this.data.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                if (value) {
                    this.data.pageSize = value;
                    this.loadData();
                }

            },
            onCancel: function () {
                this.modalEdit = false
            },
            handleSubmit: function () {
                this.$refs['saveRoadInfo'].validate(valid => {
                    if (valid)
                        this.saveRoadInfo()
                })

            }
        }
    }
</script>

<style scoped>
    .max-width-input {
        width: 100%;
    }
</style>
